<template>
	<view class="">
		<view class="guess-like">
			<view class="like-top"> 猜你喜欢</view>
			<view class="commodity">
				<view class="commodity-list" v-for="(item,index) in commodityList" :key="index">
					<view class="commodity-advertise" v-if="item.status == 2" @click="linkAdvertiseGoods">
						<image :src="item.img" mode="aspectFill" class="advertise"></image>
					</view>
					<view v-else @click="goodsList()">
						<!-- img -->
						<image class="commodity-img" :src="item.img" mode=""></image>
						<view class="commodity-info">
							<!-- 名称 -->
							<text class="name">
								{{item.name}}
							</text>
							<!-- 简介 -->
							<view class="label" v-if="item.subtitle === undefined">
								<text class="products">{{item.products}}</text>
								<text class="sale">{{item.sale}}</text>
							</view>
							<!-- 评分 -->
							<view class="subtitle" v-if="item.subtitle !== undefined">
								<u-rate :count="count" v-model="reteValue" disabled active-icon="star-fill" inactive-icon="star-fill" active-color="#FDC62F"
								 inactive-color="#D6D6D6"></u-rate>
								<text class="rate">{{item.subtitle}}分</text>
							</view>
							<view class="purchase">
								<!-- 价格 -->
								<view class="bots">
									<view class="purchase-left">
										￥
										<text class="price-left">{{item.price}}</text>
									</view>
									<view class="purchase-con">
										￥
										<text class="price-right">{{item.con}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			commodityList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				count: 5,
				reteValue: 4

			}

		},
		methods: {
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
			},
			detail() {
				uni.showToast({
					title: '购买',
				});
			},
			goodsList() {
				uni.navigateTo({
					url: '/pages/goods/detail/detail'
				})
			},
			linkAdvertiseGoods(){
				uni.navigateTo({
					url:"/pages/goods/detail/advertise"
				})
			}
		}
	}
</script>

<style lang="scss">
	.guess-like {
		width: 100%;
		height: auto;

		.like-top {
			width: 100%;
			height: 89rpx;
			line-height: 89rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: bold;
			color: rgba(41, 41, 41, 1);
		}

		.commodity {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.commodity-list {
				width: 49.2%;
				background-color: #fff;
				margin-bottom: 15rpx;
				border-radius: 12rpx;
				overflow: hidden;

				.commodity-advertise {
					width: 100%;
					height: 560rpx;

					.advertise {
						width: 100%;
						height: 100%;
					}
				}

				.commodity-img {
					display: inline-block;
					width: 100%;
					height: 348rpx;
					will-change: height;
				}

				.commodity-info {
					padding: 0 15rpx 30rpx;

					.name {
						margin-top: 23rpx;
						line-height: 30rpx;
						padding: 0 6rpx;
						height: 30rpx;
						display: block;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						word-break: break-all;
						font-size: 28rpx;
						font-family: PingFang;
						font-weight: 500;
						color: rgba(41, 41, 41, 1);
					}

					.label {
						margin-top: 19rpx;
						display: flex;

						text {
							display: inline-block;
							font-size: 18rpx;
							margin-right: 10rpx;
							padding: 4rpx 10rpx;
							border-radius: 6rpx;
							font-family: PingFang SC;
							font-weight: 400;
						}

						.products {
							color: #1db7f0;
							font-size: 18rpx;
							border: 1rpx solid #1db7f0;
							text-align: center;
						}

						.sale {
							color: #fc730a;
							font-size: 18rpx;
							border: 1rpx solid #fc730a;
							text-align: center;
						}
					}

					.subtitle {
						margin-top: 20rpx;
						display: flex;
						align-items: center;

						.rate {
							color: #fdc733;
							font-size: 28rpx;
							margin-left: 10rpx;
						}
					}

					.purchase {
						width: 100%;
						margin-top: 22rpx;
						display: flex;
						align-items: flex-end;
						justify-content: space-between;

						.bots {
							display: flex;
							align-items: flex-end;
							font-family: PingFang;

							.purchase-left {
								font-size: 24rpx;
								color: #F01D31;
								font-weight: bold;

								.price-left {
									font-size: 32rpx;
									color: #F01D31;
									font-weight: bold;
								}
							}

							.purchase-con {
								margin-left: 10rpx;
								font-size: 20rpx;
								color: #A3A3A3;
								text-decoration: line-through;

								.price-right {
									font-size: 24rpx;
									color: #A3A3A3;
								}
							}

						}

					}
				}
			}
		}
	}
</style>
